<template>
  <div class="box">
    <div class="r">
      <div class="r-l">
        <div class="r180 iconfont icon-jiantou" @click="gorouter(0)"></div>
        <div class="iconfont icon-jiantou" @click="gorouter(1)"></div>
      </div>
      <div class="r-r">
        <div class="icon">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="Go GitHub"
            placement="top-start"
          >
            <div
              style="font-size: 14px"
              class="iconfont icon-GitHub"
              @click="gogitbub"
            ></div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="isfull ? 'Full Screen' : 'Exit Screen'"
            placement="top-start"
          >
            <div
              class="iconfont icon-quanping fsplus"
              @click="fullscreen"
              v-if="isfull"
            ></div>
            <div class="iconfont icon-guanbiquanping" @click="exitscreen"></div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="Set Them"
            placement="top-start"
          >
            <div class="iconfont icon-shezhi fsplus" @click="setthem"></div>
          </el-tooltip>
        </div>
        <div class="names">
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="../../../assets//img//qqdzz.png" alt="" />
              <div
                style="color: #fff"
                v-if="typeof useuserstore.userinfo == 'object'"
              >
                {{ useuserstore.userinfo.username }}
              </div>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>首页</el-dropdown-item>
                <el-dropdown-item divided>更换头像</el-dropdown-item>
                <el-dropdown-item divided @click="saybaibai"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
  <teleport to="body">
    <div class="thembox" v-if="themeshow">
      <div class="thembox-t">
        <div class="t-t-l">Variable Themes</div>
        <div class="t-t-r iconfont icon-zhuti_tiaosepan"></div>
      </div>
      <div class="thembox-con">
        Cycle through 2 themes, from darkest to lightest.
      </div>
      <div class="them-con">
        <div
          class="them-con-item"
          style="background-color: #abff52"
          :class="{ 'them-ac': themcurr == 'green' }"
          @click="changenthem('green')"
        >
          <div class="top">
            <div class="iconfont icon-lvsehuanbaohuichang"></div>
            green
          </div>
          <div class="tm-show">
            <div style="background-color: #abff52"></div>
            <div style="background-color: #cef5a5"></div>
            <div style="background-color: #000"></div>
            <div style="background-color: #fff"></div>
          </div>
        </div>
        <div
          class="them-con-item"
          style="background-color: #0d4ea4"
          :class="{ 'them-ac': themcurr == 'blue' }"
          @click="changenthem('blue')"
        >
          <div class="top">
            <div class="iconfont icon-lvsehuanbaohuichang"></div>
            green
          </div>
          <div class="tm-show">
            <div style="background-color: #0d4ea4"></div>
            <div style="background-color: #5b79a0"></div>
            <div style="background-color: #000"></div>
            <div style="background-color: #fff"></div>
          </div>
        </div>
        <!-- ///// -->
        <div
          class="them-con-item"
          style="background-color: #f7c9c9"
          :class="{ 'them-ac': themcurr == 'pink' }"
          @click="changenthem('pink')"
        >
          <div class="top">
            <div class="iconfont icon-lvsehuanbaohuichang"></div>
            green
          </div>
          <div class="tm-show">
            <div style="background-color: #f7c9c9"></div>
            <div style="background-color: #f7dbdb"></div>
            <div style="background-color: #000"></div>
            <div style="background-color: #fff"></div>
          </div>
        </div>
        <!-- //// -->
        <div
          class="them-con-item"
          style="background-color: #b952f9"
          :class="{ 'them-ac': themcurr == 'purple' }"
          @click="changenthem('purple')"
        >
          <div class="top">
            <div class="iconfont icon-lvsehuanbaohuichang"></div>
            green
          </div>
          <div class="tm-show">
            <div style="background-color: #b952f9"></div>
            <div style="background-color: #d2a7ec"></div>
            <div style="background-color: #000"></div>
            <div style="background-color: #fff"></div>
          </div>
        </div>
      </div>
      <div class="bu">
        <div class="color" @click="themok">Cycle Theme</div>
        <div @click="themcancal">Concal</div>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import userstore from "@/store/user/index";
import themstore from "@/store/themctel/index";
const usethemstore = themstore();
const useuserstore = userstore();
const router = useRouter();
const isfull = ref<boolean>(true);
const themeshow = ref<boolean>(false);
const themcurr = ref("green");
const saybaibai = (): void => {
  localStorage.removeItem("token");
  useuserstore.userinfo = "";
  router.push({ path: "/login" });
};
const gogitbub = (): void => {
  window.open("https://github.com");
};
const fullscreen = (): void => {
  const element = document.documentElement;
  element.requestFullscreen();
  isfull.value = false;
};
const exitscreen = (): void => {
  document.exitFullscreen();
  isfull.value = true;
};
const gorouter = (e: number) => {
  if (e) {
    return router.go(1);
  }
  return router.go(-1);
};
const setthem = (): void => {
  themeshow.value = true;
};
const changenthem = (e: string) => {
  themcurr.value = e;
  document.documentElement.setAttribute("data-them", e);
  usethemstore.chagethem = !usethemstore.chagethem;
};
const themok = () => {
  localStorage.setItem("them", themcurr.value);
  document.documentElement.setAttribute(
    "data-them",
    localStorage.getItem("them") as string
  );
  themeshow.value = false;
};
const themcancal = () => {
  themeshow.value = false;
  themcurr.value = (localStorage.getItem("them") as string) || "green";
  document.documentElement.setAttribute(
    "data-them",
    localStorage.getItem("them") as string
  );
  usethemstore.chagethem = !usethemstore.chagethem;
};
onMounted(() => {
  themcurr.value = (localStorage.getItem("them") as string) || "green";
});
</script>

<style scoped lang="scss">
.them-ac {
  position: relative;
  border: 3px solid #c0ab92;
  &::after {
    position: absolute;
    content: "\e60b";
    font-family: "iconfont" !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #c0ab92;
  }
}
.thembox {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 800px;
  border-radius: 10px;
  background-color: #313735;
  box-shadow: 0 0 4px 0px var(--them-color);
  padding: 25px;
  overflow: hidden;
  .bu {
    display: flex;
    gap: 20px;
    padding-left: 10px;
    margin-top: 10px;
    > div {
      cursor: pointer;

      width: 150px;
      height: 40px;
      background-color: #b6ab90;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 700;
      color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 1s;
      &:hover {
        transform: scale(1.03);
      }
    }
    .color {
      background-color: var(--them-color);
    }
  }
  .thembox-t {
    margin-top: 10px;
    height: 50px;
    color: #ebd1be;
    font-size: 30px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .iconfont {
      font-size: 30px;
    }
  }
  .thembox-con {
    height: 40px;
    line-height: 40px;
    color: rgba(235, 209, 190, 0.7);
  }
  .them-con {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    height: 170px;
    gap: 20px;
    justify-items: center;
    align-items: center;
    .them-con-item {
      box-sizing: content-box;
      cursor: pointer;
      height: 75px;
      width: 130px;
      border-radius: 10px;
      background-color: #e9d3c1;
      padding: 10px;
      .top {
        display: flex;
        gap: 2px;
        font-size: 13px;
        font-weight: 700;
      }
      .tm-show {
        height: 60px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        > div {
          height: 25px;
          width: 25px;
          border-radius: 50%;
          border: 1px solid #b7b7b7;
        }
        div:nth-child(n + 1) {
          margin-left: -10px;
        }
      }
    }
  }
}
.box {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  border-bottom: 1px solid #4c4d4f;
  background-color: #111315;
  color: #fdf5e6;
  .l {
    height: 100%;
    width: 300px;
    display: flex;
    gap: 10px;
    .logocon {
      align-self: flex-end;
      font-size: 14px;
      font-weight: 700;
      padding-bottom: 7px;
      font-family: "Luckiest Guy";
    }
    .logo {
      height: 100%;
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      img {
        height: 180px;
        width: 180px;
      }
    }
  }
  .r {
    height: 100%;
    width: calc(100vw - 500px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .r-r,
    .r-l {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .r-r {
      width: 220px;
      .icon {
        display: flex;
        gap: 20px;
        align-items: center;
        .iconfont {
          font-size: 1.4vw;
          cursor: pointer;
        }
        .fsplus {
          font-size: 1.4vw;
        }
      }
      .names {
        cursor: pointer;
        :deep(.el-dropdown-link) {
          display: flex;
          align-items: center;
          gap: 5px;
        }
        img {
          width: 2vw;
          height: 2vw;
          border-radius: 50%;
        }
      }
    }
    .r-l {
      width: 100px;
      .iconfont {
        font-size: 1vw;
        cursor: pointer;
      }
      .r180 {
        transform: rotate(180deg);
      }
    }
  }
}
</style>
